<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物料管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">

    <h2>欢迎你：{{userInfo.user.username}}，部门信息：{{userInfo.user.dname}}</h2>

    <el-button type="primary" @click="toAdd">添加物料</el-button>
    <el-button type="info" @click="goWuliao">采购单管理</el-button>


    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="序号">
        </el-table-column>
        <el-table-column
                prop="code"
                label="编码">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称">
        </el-table-column>
        <el-table-column
                prop="unit"
                label="单位">
        </el-table-column>
        <el-table-column
                prop="days"
                label="效期天数">
        </el-table-column>
        <el-table-column
                prop="specUnit"
                label="规格单位">
        </el-table-column>
        <el-table-column
                prop="spec"
                label="规格">
        </el-table-column>
        <el-table-column
                prop="packageSpec"
                label="规格包装">
        </el-table-column>
        <el-table-column
                prop="typeNames"
                label="物料类型">
        </el-table-column>
        <el-table-column
                prop="supplierName"
                label="供应商">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
        </el-table-column>
        <el-table-column
                label="审核状态">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.shenheState=='通过'">{{scope.row.shenheState}}</el-tag>
                <el-tag type="info" v-if="scope.row.shenheState=='审核中'">{{scope.row.shenheState}}</el-tag>
                <el-tag type="danger" v-if="scope.row.shenheState=='未通过'">{{scope.row.shenheState}}</el-tag>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>



    <el-dialog title="新建项目" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="编码" :label-width="formLabelWidth">
                <el-input v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="单位" :label-width="formLabelWidth">
                <el-input v-model="form.unit" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="效期天数" :label-width="formLabelWidth">
                <el-input v-model="form.days" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="规格单位" :label-width="formLabelWidth">
                <el-input v-model="form.specUnit" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="规格" :label-width="formLabelWidth">
                <el-input v-model="form.spec" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="包装规格" :label-width="formLabelWidth">
                <el-input v-model="form.packageSpec" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="form.state" label="有效">有效</el-radio>
                <el-radio v-model="form.state" label="无效">无效</el-radio>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
                <el-select v-model="form.supplierId" placeholder="请选供应商">
                    <el-option :label="s.name" :value="s.id" :key="s.id" v-for="s in supplierList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物料类型" :label-width="formLabelWidth">
                <el-cascader
                        v-model="typeIdsArray"
                        :options="materialTypeTree"></el-cascader>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addProgram">确 定</el-button>
        </div>

    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{

            tableData:[],
            total:0,
            query:{
                page:1,
                pageSize:2
            },

            //表单添加需要
            dialogFormVisible: false,
            form: {
                name: '',
                code:"",
                supplierId:"",
                typeIds:"",
                unit:"",
                days:"",
                specUnit:"",
                spec:"",
                packageSpec:"",
                state:"",
            },
            typeIdsArray:[],//级联选择器需要的数据模型
            formLabelWidth: '120px',

            supplierList:[],//供应商集合
            materialTypeTree:[],//物料类型的级联数据
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            }
        },
        methods:{

            goWuliao(){
                window.open("/caigou.html")
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            addProgram(){


                this.form.typeIds = this.typeIdsArray.join(",");

                axios.post("/material/add",this.form,{
                    headers: {
                        'token': this.userInfo.token,
                    }
                }).then(res=>{
                    this.form = {
                        name: '',
                        code:"",
                        supplierId:"",
                        typeIds:"",
                        unit:"",
                        days:"",
                        specUnit:"",
                        spec:"",
                        packageSpec:"",
                        state:"",
                    }
                    this.typeIdsArray = [];
                    this.dialogFormVisible = false;
                    this.initData();
                })

            },
            toAdd(){
                this.dialogFormVisible = true;

            },
            initData(){
                axios.post(`/material/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;

                })
            },
            initsupplierList(){
                axios.post("/supplier/findAll").then(res=>{
                    this.supplierList = res.data;
                })
            },
            initMaterialTypeList(){
                axios.post("/material-type/materialTypeTree").then(res=>{
                    this.materialTypeTree = res.data;
                })
            }

        },
        created(){
            this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            this.initData()
            this.initsupplierList();
            this.initMaterialTypeList();
        }
    })
</script>

</body>
</html>